<template>
    <div class="message-box" id="drag-window" v-show="showLogBoard">
      <el-card style="background-color: #3C3F41; color: #9E9F9F" shadow="never" @mousedown="move">
        <div slot="header">
          <span>日志</span>
          <el-button type="text" @click="clearMsg" style="float: right; justify-content: center;display: flex">清空</el-button>
          <span style="display: inline-block; float: left; line-height: 30px"><i class="el-icon-rank" @mousedown="move">移动</i></span>
        </div>
        <div v-for="msg in msgList" :key="msg.content">
          <MessageItem :message="msg.content" :logLevel="msg.msgLevel"></MessageItem>
        </div>
      </el-card>
    </div>
</template>

<script>
    import MessageItem from "./MessageItem";
    import {mapState, mapMutations} from 'vuex'
    export default {
        name: "MessageBox",
        data(){
          return{
            msgIndex: 0,
            positionX: 0,
            positionY: 0,
            dragWindow: null
          }
        },
        components: {
          MessageItem
        },
        mounted() {
          this.dragWindow = document.getElementById('drag-window')
        },
      computed: {
          ...mapState([
            'ws',
            'msgList',
            'showLogBoard',
          ])

        },
        methods: {
          ...mapMutations([
            'resetMessageList'
          ]),
            clearMsg(){
              this.resetMessageList()
            },
          move(e){
            let odiv = this.dragWindow;

            let disX = e.clientX - odiv.offsetLeft;
            let disY = e.clientY - odiv.offsetTop;

            document.onmousemove = (e) => {
              let left = e.clientX - disX;
              let top = e.clientY - disY;

              this.positionX = left;
              this.positionY = top;

              odiv.style.top = top + 'px';
              odiv.style.left = left + 'px';
            };

            document.onmouseup = (e) => {
              document.onmouseup = null ;
              document.onmousemove = null;
            }
          }
        }
    }
</script>

<style scoped>
.message-box {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 500px;
  background-color: #666;
  z-index: 10000;
}
</style>
